<template>
  <div class="panel">
    <el-skeleton :loading="loading" animated>
      <template #template><el-skeleton-item variant="rect" style="height:120px"/></template>
      <template #default>
        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="启用时间">{{ usage.enableTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="使用部门">{{ usage.department || '-' }}</el-descriptions-item>
          <el-descriptions-item label="放置时间">{{ usage.placeTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="停用时间">{{ usage.stopTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="负责人">{{ usage.owner || '-' }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ usage.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-skeleton>
    <el-empty v-if="!loading && isEmpty" description="暂无使用信息" />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { getAssetUsage } from '@/api/sbtz/assetExtra'

const props = defineProps({ node: { type: Object, required: true } })
const loading = ref(false)
const usage = ref({})
const isEmpty = computed(() => !Object.keys(usage.value||{}).length)

async function fetch() {
  if (!props.node?.id) return
  loading.value = true
  try {
    const { data } = await getAssetUsage(props.node.id)
    usage.value = data || {}
  } finally {
    loading.value = false
  }
}
watch(()=>props.node?.id, fetch, { immediate:true })
</script>

<style scoped>
.panel{ padding: 8px; }
</style>
